﻿@page "/bullet-chart/right-to-left"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates bullet chart with diferent mode of rendering such as right to left and left to right.</p>
</SampleDescription>
<ActionDescription>
    <p>Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart.</p>
</ActionDescription>

<div class="control-section">
    <div align="center">
        <SfBulletChart DataSource="@BulletChartData" ValueField="value" TargetField="target" Theme="@theme" Minimum="0" Maximum="300" Interval="50"
                       Title="Revenue YTD" LabelFormat="${value}K" EnableRtl="true" Height="110px" Width="80%">
            <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
            <BulletChartRangeCollection>
                <BulletChartRange End="150"> </BulletChartRange>
                <BulletChartRange End="250"></BulletChartRange>
                <BulletChartRange End="300"></BulletChartRange>
            </BulletChartRangeCollection>
        </SfBulletChart>
    </div>
</div>

@code{
    public class ChartData
    {
        public double value { get; set; }
        public double target { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
{
        new ChartData { value = 270, target = 250 }
    };

    private string CurrentUri;
    private Theme theme { get; set; }
    protected override void OnInitialized()
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            theme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            theme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            theme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            theme = Theme.HighContrast;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            theme = Theme.Tailwind;
        }
        else
        {
            theme = Theme.Bootstrap4;
        }
    }
}
